<template>
  <div>
    <Row style="margin:10px;">
      <i-col span="24">
        <Button type="primary" icon="ios-add" size="small" @click="addNodeMenu">添加子节点</Button>
        <Button icon="ios-add" size="small" style="margin-left: 10px" @click="addTopMenu">添加顶级菜单</Button>
        <Button icon="ios-trash-outline" size="small" style="margin-left: 10px" @click="batchDelete">批量删除</Button>
        <Dropdown style="margin-left: 10px">
          <Button size="small">
            更多操作
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem>刷新</DropdownItem>
            <DropdownItem>收起</DropdownItem>
            <DropdownItem>展开</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </i-col>
    </Row>
    <Divider />

    <Row :gutter="24">
      <i-col span="6">
        <Tree ref="menuTree" :data="menuTree" :render="renderContentMenuTree" show-checkbox></Tree>
      </i-col>
      <i-col span="18"></i-col>
    </Row>
    <Modal v-model="addMenuModal" draggable scrollable title="添加菜单" :mask-closable="false">
      <div>
        <Form ref="addMenuForm" :model="addMenuForm" :rules="addMenuRule" :label-width="100">
          <FormItem label="类型" prop="type">
            <Select v-model="addMenuForm.type" placeholder="请选择类型" :disabled="typeDisabled">
              <Option value="MENU">菜单</Option>
              <Option value="BUTTON">按钮</Option>
            </Select>
          </FormItem>
          <FormItem label="名称" prop="displayName">
            <Input v-model="addMenuForm.displayName" placeholder="请输入名称" />
          </FormItem>
          <FormItem label="路由英文名" prop="name">
            <Tooltip content="需唯一" placement="right" style="width:100%;">
              <Input v-model="addMenuForm.name" placeholder="请输入名称" />
            </Tooltip>
          </FormItem>
          <FormItem label="路径">
            <Input v-model="addMenuForm.path" placeholder="请输入路径" />
          </FormItem>
          <FormItem label="前端组件">
            <Input v-model="addMenuForm.component" placeholder="请输入前端组件" />
          </FormItem>
          <FormItem label="图标">
            <Row>
              <i-col span="16">
                <FormItem>
                  <Input v-model="addMenuForm.icon" placeholder="请输入或选择图标" />
                </FormItem>
              </i-col>
              <i-col span="8">
                <Button icon="md-ionic" size="small" style="margin-left: 10px">选择图标</Button>
              </i-col>
            </Row>
          </FormItem>
          <FormItem label="排序值">
            <InputNumber :max="9999" :min="0" v-model="addMenuForm.sort" :step="0.1"></InputNumber>
          </FormItem>
          <FormItem label="是否启用">
            <i-switch size="large" v-model="addMenuForm.enabled">
              <span slot="open">启用</span>
              <span slot="close">禁用</span>
            </i-switch>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button type="text" size="small" @click="addMenuModal = false">取消</Button>
        <Button type="primary" size="small" @click="addMenuFormSubmit">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    let that = this;
    return {
      addMenuModal: false,
      typeDisabled: false,
      parentMenu: null,
      addMenuForm: {
        type: null,
        displayName: null,
        path: null,
        name: null,
        component: null,
        icon: null,
        sort: 0,
        enabled: true
      },
      addMenuRule: {
        type: [{ required: true, message: "类型不能为空", trigger: "change" }],
        displayName: [
          { required: true, message: "名称不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "路由英文名不能为空", trigger: "blur" }
        ]
      },
      menuTree: [],
      renderContentMenuTree(h, { root, node, data }) {
        let iconText = "";
        if (data.data.type == "MENU") {
          iconText = "md-list-box";
        } else {
          iconText = "md-radio-button-on";
        }
        return h(
          "span",
          {
            style: {
              display: "inline-block",
              width: "100%"
            }
          },
          [
            h(
              "span",
              {
                style: {
                  cursor: "pointer"
                },
                on: {
                  click: function() {
                    $(".menu-tree-item").css("background-color", "");
                    $("#menu-tree-" + data.data.id).css(
                      "background-color",
                      "#d5e8fc"
                    );
                    that.parentMenu = data.data;
                  }
                },
                attrs: {
                  id: "menu-tree-" + data.data.id,
                  class: "menu-tree-item"
                }
              },
              [
                h("Icon", {
                  props: {
                    type: iconText
                  },
                  style: {
                    marginRight: "8px"
                  }
                }),
                h("span", data.title)
              ]
            )
          ]
        );
      }
    };
  },
  mounted() {
    this.getMenuTree();
  },
  methods: {
    /**
     * 点击添加顶级菜单按钮
     */
    addTopMenu() {
      this.addMenuForm = {
        type: "MENU",
        displauName: null,
        path: null,
        name: null,
        component: null,
        icon: null,
        sort: 0,
        enabled: true
      };
      this.addMenuFormLoading = true;
      this.typeDisabled = true;
      this.$refs["addMenuForm"].resetFields();
      this.addMenuModal = true;
    },
    addNodeMenu() {
      if(this.parentMenu == null){
        this.$Notice.warning({ desc: '请选选择父节点' });
        return;
      }
      if(this.parentMenu.level === 3){
        this.$Notice.warning({ desc: '只支持二级菜单目录'});
        return;
      }
      this.typeDisabled = false;
      let type = null;
      if(this.parentMenu.level === 2){
        if(this.parentMenu.type === 'BUTTON'){
          this.$Notice.warning({ desc: '按钮只能作为叶子节点'})
          return;
        }
        this.typeDisabled = true;
        type = "BUTTON";
      }
      let pId = this.parentMenu.id;
      let level = this.parentMenu.level + 1;
      this.addMenuForm = {
        pId: pId,
        level: level,
        type: type,
        displauName: null,
        path: null,
        name: null,
        component: null,
        icon: null,
        sort: 0,
        enabled: true
      };
      this.addMenuFormLoading = true;
      this.$refs["addMenuForm"].resetFields();
      this.addMenuModal = true;
    },
    /**
     * 提交添加菜单
     */
    addMenuFormSubmit() {
      this.addMenuFormLoading = true;
      this.$refs["addMenuForm"].validate(valid => {
        if (valid) {
          this.saveMenu();
        } else {
          return false;
        }
      });
    },
    /**
     * 批量删除按钮
     */
    batchDelete () {
      let deleteMenuList = this.$refs["menuTree"].getCheckedNodes();
      if(deleteMenuList == null || deleteMenuList.length == 0){
        this.$Notice.warning({ desc: '请先选择要删除的节点'});
        return;
      }
      let ids = deleteMenuList.map((x) => { return x.data.id});
      this.$Modal.confirm({
                    title: '删除确认',
                    content: '确定删除选中的' + ids.length + '个菜单？删除后数据无法恢复！',
                    onOk: () => {
                        this.delete(ids);
                    }
                });
    },
    /**
     * 请求后台，进行删除
     */
    delete(ids){
      this.$axios.post("/sys/sys-menu/delete",ids)
      .then(res => {
          if (res.code === 0) {
            this.$Notice.success({ title: "成功" });
          } else {
            this.$Notice.success({ title: "失败" });
          }
        })
        .then(() => {
          this.getMenuTree();
        });
    },
    /**
     * 保存菜单数据到后台
     */
    saveMenu() {
      this.$axios
        .post("/sys/sys-menu/add", this.addMenuForm)
        .then(res => {
          if (res.code === 0) {
            this.$Notice.success({ title: "成功" });
          } else {
            this.$Notice.success({ title: "失败" });
          }
        })
        .then(() => {
          this.addMenuModal = false;
          this.getMenuTree();
        });
    },
    getMenuTree() {
      this.$axios.get("/sys/sys-menu/menu-tree").then(res => {
        this.menuTree = res.data;
      });
    }
  }
};
</script>

<style scoped>
.ivu-divider-horizontal {
  margin: 0;
}
</style>
